<template>
	<div class="echart">
		<div :id="`${domId}-bar`" class="echart-bar"></div>
		<echart-bar-control :id="`${domId}-bar-control`" class="echart-bar-control" 
			:app="app"
			@change="handleChange"
		></echart-bar-control>
	</div>
</template>
  
<script>
import * as echarts from 'echarts';
import { app } from '/@/jqkit/jqkECharts/echartBarApp.js'
import EchartBarControl from '/@/jqkit/jqkECharts/echartBarControl.vue';
export default {
	name: 'Echart',
	components: {
		EchartBarControl
	},
	props: {
		dataSource: {
			default: null
		}
	},
	data() {
		return {
			title: "",
			xAxisData: [],
			yAxisData: [],
			app: app,
			domId: "",
			myChart: null,
			timer: null,
		};
	},
	watch: {
		dataSource: {
			// 监听 props.dataSource 的变化
			handler(newVal, _) {
				this.handleDataSource(newVal);
			},
			deep: true,
			immediate: true,
		}
	},
	created() {
	},	
	mounted() {
		this.domId = this.$el.id;
		window.addEventListener('resize', this.resizeChart);
	},
	beforeUnmount() {
		window.removeEventListener('resize', this.resizeChart);
	},
	methods: {
		handleChange(app) {
			const labelOption = {
				rotate: app.config.rotate,
				align: app.config.align,
				verticalAlign: app.config.verticalAlign,
				position: app.config.position,
				distance: app.config.distance
			};
			const series = this.yAxisData.map(() => ({ label: labelOption }));;
			this.myChart.setOption({ series: series });
		},
		handleDataSource(obj) {
			if (!obj) return;
			// console.log("当前组件接收数据源为：", obj);

			this.title = obj.title || "";
			this.xAxisData = obj.xAxisData || [];
			this.yAxisData = obj.yAxisData || [];

			this.$nextTick(() => {
				// console.log("当前组件 id 为：", this.$el.id);
				this.initChart();
				this.resizeChart();
			})
		},

		// 获取 series 数据
		getSeries(yAxisData) {
			const labelOption = {
				show: true,
				position: this.app.config.position,
				distance: this.app.config.distance,
				align: this.app.config.align,
				verticalAlign: this.app.config.verticalAlign,
				rotate: this.app.config.rotate,
				formatter: '{c}  {name|{a}}',
				fontSize: 16,
				rich: {
					name: {}
				}
			};
			return yAxisData.map(item => ({
				name: item.name || '',
				type: 'bar',
				barGap: 0,
				label: labelOption,
				emphasis: { 
					focus: 'series' 
				},
				data: item.data || [],
			}));
		},

		// 获取 echart 配置项
		getOption() {
			return {
				title: {
					text: this.title
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					}
				},
				legend: {
					data: this.yAxisData.map(item => item.name)
				},
				toolbox: {
					show: true,
					orient: 'vertical',
					left: 'right',
					top: 'center',
					feature: {
					mark: { show: true },
					dataView: { show: true, readOnly: false },
					magicType: { show: true, type: ['line', 'bar', 'stack'] },
					restore: { show: true },
					saveAsImage: { show: true }
					}
				},
				xAxis: [{
					type: 'category',
					axisTick: { show: false },
					data: this.xAxisData
				}],
				yAxis: [{ type: 'value' }],
				series: this.getSeries(this.yAxisData),
			};
		},

		// 初始化 echart 图表
		initChart() {
			var chartDom = document.getElementById(`${this.domId}-bar`);
			if (!chartDom) return;

			echarts.dispose(chartDom);
			var myChart = echarts.init(chartDom);
			var option = this.getOption();
			option && myChart.setOption(option);
			this.myChart = myChart;
		},

		// 重置 echart 尺寸
		resizeChart() {
			setTimeout(() => {
				clearTimeout(this.timer);
				this.timer = setTimeout(() => {
					if (this.myChart) {
						this.myChart.resize();
					}
				}, 200);
			})
		}
	}
};
</script>
  
<style scoped lang="scss">
.echart {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	background-color: #fff;
	.echart-bar {
		width: 100%; 
		height: 100%; 
		z-index: 999;
	}
	.echart-bar-control {
		position: absolute;
		right: 5px;
		top: 5px;
		width: 240px;
		z-index: 1000;
	}
}
</style>